<template>
    <UserSearch v-model:searchData="searchData" @findUser="findUser" @resetSearchForm="resetSearchForm" />
    <UserList :tableData="tableData" v-model:pageData="pageData" v-model:activeType="activeType"
        @onSortChange="onSortChange" />
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'

import { findUserApi } from '@/api/user';

import UserList from './UserList.vue';
import UserSearch from './UserSearch.vue';

const activeType = ref('');
const sort = ref(0);
const pageData = ref({ currentPage: 1, pageSize: 5 });
const initSearchData = {
    searchValue: '', searchType: '', gradeId: '', groupId: '',
    // tagIds: []
};
const searchData = ref({ ...initSearchData });
const tableData = reactive({
    rows: [], total: 0
})

onMounted(() => {
    findUser();
})

watch([activeType, sort, pageData], () => {
    findUser();
}, { deep: true })


// 发送请求获取最新的用户数据
function findUser() {
    findUserApi({
        ...pageData.value,
        ...searchData.value,
        type: activeType.value,
        balanceSort: sort.value,
    })
        .then(res => {
            if (res.code == 200) {
                tableData.rows = res.data.rows;
                tableData.total = res.data.total;
            }
        })
}

// 用户切换排序方式时
const onSortChange = (data: { order: any }) => {
    if (data.order == 'ascending') {
        sort.value = 1;
    } else if (data.order == 'descending') {
        sort.value = -1;
    } else {
        sort.value = 0;
    }
}

function resetSearchForm() {
    searchData.value = { ...initSearchData };
    findUser();
}

</script>

<style scoped></style>